/**
 * 视频选择器组件
 * 允许用户选择不同的视频文件进行播放
 */

import React, { useState, useRef } from 'react'
import './VideoSelector.css'

export interface VideoItem {
  id: string
  name: string
  url: string
  duration?: string
  thumbnail?: string
  description?: string
  size?: string
}

interface VideoSelectorProps {
  videos: VideoItem[]
  currentVideoId?: string
  onVideoSelect: (video: VideoItem) => void
  onVideoUpload?: (file: File) => void
  className?: string
}

const VideoSelector: React.FC<VideoSelectorProps> = ({
  videos,
  currentVideoId,
  onVideoSelect,
  onVideoUpload,
  className = ''
}) => {
  const [isOpen, setIsOpen] = useState(false)
  const [dragOver, setDragOver] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const currentVideo = videos.find(v => v.id === currentVideoId)

  const handleVideoClick = (video: VideoItem) => {
    onVideoSelect(video)
    setIsOpen(false)
  }

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file && file.type.startsWith('video/')) {
      onVideoUpload?.(file)
      setIsOpen(false)
    }
  }

  const handleDragOver = (event: React.DragEvent) => {
    event.preventDefault()
    setDragOver(true)
  }

  const handleDragLeave = (event: React.DragEvent) => {
    event.preventDefault()
    setDragOver(false)
  }

  const handleDrop = (event: React.DragEvent) => {
    event.preventDefault()
    setDragOver(false)
    
    const files = Array.from(event.dataTransfer.files)
    const videoFile = files.find(file => file.type.startsWith('video/'))
    
    if (videoFile) {
      onVideoUpload?.(videoFile)
      setIsOpen(false)
    }
  }

  return (
    <div className={`video-selector ${className}`}>
      {/* 当前视频显示 */}
      <div className="current-video" onClick={() => setIsOpen(!isOpen)}>
        <div className="video-info">
          {currentVideo ? (
            <>
              <div className="video-thumbnail">
                {currentVideo.thumbnail ? (
                  <img src={currentVideo.thumbnail} alt={currentVideo.name} />
                ) : (
                  <div className="thumbnail-placeholder">🎬</div>
                )}
              </div>
              <div className="video-details">
                <span className="video-name">{currentVideo.name}</span>
                {currentVideo.duration && (
                  <span className="video-duration">{currentVideo.duration}</span>
                )}
                {currentVideo.description && (
                  <span className="video-description">{currentVideo.description}</span>
                )}
              </div>
            </>
          ) : (
            <>
              <div className="video-thumbnail">
                <div className="thumbnail-placeholder">📁</div>
              </div>
              <div className="video-details">
                <span className="video-name">选择视频</span>
                <span className="video-description">点击选择或拖拽视频文件</span>
              </div>
            </>
          )}
        </div>
        <div className="dropdown-arrow">
          <span className={`arrow ${isOpen ? 'up' : 'down'}`}>▼</span>
        </div>
      </div>

      {/* 视频列表下拉菜单 */}
      {isOpen && (
        <div className="video-dropdown">
          <div className="dropdown-content">
            {/* 预设视频列表 */}
            {videos.length > 0 && (
              <div className="video-section">
                <h4>预设视频</h4>
                <div className="video-list">
                  {videos.map(video => (
                    <div
                      key={video.id}
                      className={`video-item ${video.id === currentVideoId ? 'active' : ''}`}
                      onClick={() => handleVideoClick(video)}
                    >
                      <div className="video-thumbnail">
                        {video.thumbnail ? (
                          <img src={video.thumbnail} alt={video.name} />
                        ) : (
                          <div className="thumbnail-placeholder">🎬</div>
                        )}
                      </div>
                      <div className="video-details">
                        <span className="video-name">{video.name}</span>
                        {video.duration && (
                          <span className="video-duration">{video.duration}</span>
                        )}
                        {video.description && (
                          <span className="video-description">{video.description}</span>
                        )}
                      </div>
                      {video.id === currentVideoId && (
                        <div className="current-indicator">✓</div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* 文件上传区域 */}
            {onVideoUpload && (
              <div className="video-section">
                <h4>上传视频</h4>
                <div
                  className={`upload-area ${dragOver ? 'drag-over' : ''}`}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onDrop={handleDrop}
                  onClick={() => fileInputRef.current?.click()}
                >
                  <div className="upload-icon">📁</div>
                  <div className="upload-text">
                    <span className="primary-text">点击选择视频文件</span>
                    <span className="secondary-text">或拖拽文件到此处</span>
                    <span className="format-text">支持 MP4, WebM, AVI, MOV 等格式</span>
                  </div>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="video/*"
                    onChange={handleFileSelect}
                    style={{ display: 'none' }}
                  />
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* 点击外部关闭下拉菜单 */}
      {isOpen && (
        <div className="dropdown-overlay" onClick={() => setIsOpen(false)} />
      )}
    </div>
  )
}

export default VideoSelector
